<template>
	<view class="mainPage">

		<view class="conbox">

			<view class="container">
				<view class="head">
					<view class="head-title">
						{{fishpond}}|{{ticket_name}}
					</view>
					<view class="head-subtitle">
						点击转盘开始摇号
					</view>
					<view class="head-tip-title">
						注意：摇号之后不能再退款了！
					</view>
				</view>
				<!-- 背景 -->
				<image src="https://cdn.zhidiaotianxia.com//def/2d9ad202412231713593631.png" class="cont" mode=""></image>
				<image src="https://cdn.zhidiaotianxia.com//def/bcddb202412231714008477.png" class="caidai" mode=""></image>
				<view class="main">
					<view class="canvas-container">
						<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
							<view class="canvas-line">
								<view class="canvas-litem" v-for="(item,index) in list" :key="index"
									:style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
							</view>

							<view class="canvas-list">
								<view class="canvas-item"
									:style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }"
									v-for="(iteml,index) in list" :key="index">
									<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
										<text class="a" style="font-size: 24rpx;">{{iteml.areaName}}</text>
										<text class="b" style="font-size: 24rpx;">({{iteml.name}})</text>
									</view>
								</view>
							</view>
						</view>

						<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
					</view>
				</view>
				<!-- 规则 -->
				<view class="guize">
					<view class="title">钓位图</view>
					<u--image :src="fishing_pic" height="360rpx" width="520rpx"></u--image>
				</view>
			</view>
             
		</view>
       <!-- <u-modal :show="show" :title="title" :content='content' :showConfirmButton="true" :showCancelButton="true" @cancel="cancelEven" @confirm="confirmEven"></u-modal> -->
	   
	   <u-popup :show="showBox" mode="center" round="12rpx" :closeOnClickOverlay="false" @close="showBox = false" >
			   <view class="popup-wrap">
				   <view class="title">
				   	我的钓位
				   </view>
				   <view class="content">
						<view class="left">
							您摇到的位置是：
						</view>
						<view class="right">
							{{activeSeat.areaName}}{{activeSeat.noValue}}
						</view>
				   </view>
				   <view class="btn-wrap">
						<view class="btn btn1">
							5元重摇
						</view>
						<view class="btn btn2" @tap="confirmBtn">
							确定
						</view>
				   </view>
			   </view>
		</u-popup>

	</view>
</template>

<script>
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from 'vuex';
	import { configMap } from "@/utils";
	import { getSeatInfo, selectSeat} from '@/api/store.js';
	export default {
		computed:{
			...configMap([], mapGetters(['isLogin'])),
		},
		data() {
			return {
				showBox:false,
				fishing_pic:'',
				fishpond:'水上田园',
				ticket_name:'鲤鱼塘',
				errorNetwork: false,
				all_seats:[],
				list: [{
						"areaName":"1区",
						"name": "1号",
						"value": "5",
					},
					{
						"areaName":"1区",
						"name": "5号",
						"value": "6",
					},
					{
						"areaName":"1区",
						"name": "10号",
						"value": "7",
					},
					{
						"areaName":"1区",
						"name": "12号",
						"value": "8",
					},
					{
						"areaName":"1区",
						"name": "15号",
						"value": "9",
					},
					{
						"areaName":"1区",
						"name": "20号",
						"value": "10",
					},

					{
						"areaName":"1区",
						"name": "21号",
						"value": "11",
					},
					{
						"areaName":"1区",
						"name": "22号",
						"value": "12",
					},
					{
						"areaName":"1区",
						"name": "23号",
						"value": "13",
					},
					{
						"areaName":"1区",
						"name": "25号",
						"value": "14",
					},
					{
						"areaName":"1区",
						"name": "30号",
						"value": "15",
						//isNoPrize: true, // 是否未中奖 true未中奖，false已中奖
					},
				],
				width: 0,
				animationData: {},
				btnDisabled: '',
				show:false,
				title:"提示",
				content:"",
				ticket_order_id:null,
				activeSeat:{
					areaName:null,//区域
					noValue:null,//座位
				},//摇中位置
			}
		},
		onLoad(options) {
			if (!options.ticket_order_id) return this.$util.Tips({
				title: '缺少必要参数无法进行摇号'
			}, {
				tab: 3,
				url: 1
			});
			this.ticket_order_id = options.ticket_order_id
			// 获取奖品列表
			if (this.isLogin === false) {
				toLogin()
			} else {
				this.getSeatInfoData(this.ticket_order_id)
			}
			// this.width = 360 / this.list.length
		},
		onShow() {

		},
		onHide() {

		},
		onPullDownRefresh() {

		},

		onUnload() {

		},
		methods: {
			confirmBtn(){
				this.showBox = false
				
				
				this.$util.Tips({
					title: '您已确认座位'
				}, {
					tab: 1,
					url: '/pages/fishing/index'
				});
				let id = this.ticket_order_id
				// let obj = {
				// 	id:id
				// }
				// uni.$emit('updateSelect', obj)
				uni.setStorageSync('updateSelectId', id);
			},
			//判断是否有位置可选
			isHaveSeat(all_seats){
				let isNull = all_seats.some(item=>{
					return item.seatList.some(item=>item.status === 1)
				})
				if(!isNull){
					uni.showModal({
						title: '温馨提示',
						content: '当前暂无位置可选，请晚点再来吧',
						cancelColor:'#549CE3',
						confirmColor:'#ffc53e',
						success: function (res) {
							if (res.confirm) {
								uni.switchTab({
									url:'/pages/fishing/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				return isNull
			},
			//获取可用位置
			getSeatInfoData(id){
				getSeatInfo(id).then(res=>{
					let {all_seats,fishing_pic,ticket_name,mer_name} = res.data
					this.fishing_pic = fishing_pic
					this.ticket_name = ticket_name
					this.fishpond = mer_name
					this.all_seats = all_seats
					let newSeats = all_seats.map(item=>{
						let filterArr = item.seatList.filter(fItem=>fItem.status === 1)
						let newArr = {
							areaName:item.areaName,
							seatList:filterArr
						}
						return newArr
					})
					let newSeatsArr = []
					newSeats.forEach(item=>{
						item.seatList.forEach(cItem=>{
							let obj = {
								areaName:item.areaName,
								name:cItem.name,
								value:cItem.no,
							}
							newSeatsArr.push(obj)
						})
						
					});
					this.list = newSeatsArr
					this.width = 360 / this.list.length
					this.isHaveSeat(all_seats)
				})
			},
			animation(index, duration) {
				//中奖index
				var list = this.list;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
				var runNum = 4; //旋转8周

				// 旋转角度
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1
				//创建动画
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(this.runDeg).step();
				this.animationData = animationRun.export();
				this.btnDisabled = 'disabled';

			},
			//发起抽奖
			playReward() {
				let all_seats = this.all_seats
				let isHaveSeat = this.isHaveSeat(all_seats)
				if(!isHaveSeat) return
				let params = {
					is_lottery:true,
				}
				let id = this.ticket_order_id
				selectSeat(id,params).then(res=>{
					// debugger
					console.log(res);
					let {result} = res.data
					let fIndex = this.list.findIndex(item=>item.value === result)//index中奖号码
					let duration = 4000 //动画时长
					this.animation(fIndex, duration)
					setTimeout(() => {
						let{areaName,name} = this.list[fIndex]
						this.activeSeat.areaName = areaName
						this.activeSeat.noValue = name
						this.showBox = true
						// uni.showModal({
						// 	content: '摇中钓位：' + areaName +name
						// })
						this.btnDisabled = '';
					}, duration + 1000)
				})
			},
			// cancelEven(){},
			// confirmEven(){}

		}
	}
</script>

<style lang="scss" scoped>
	.popup-wrap{
		padding: 40rpx 30rpx;
		text-align: center;
		width: 580rpx;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 10rpx;
		}
		.content{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			align-items: flex-end;
			.left{
				font-size: 24rpx;
				color: #6f6f6f;
			}
			.right{
				font-size: 42rpx;
				font-weight: bold;
				color: #fe8c3e;
			}
		}
		.btn-wrap{
			display: flex;
			justify-content: center;
			.btn{
				margin: 60rpx 18rpx 0;
				min-width: 190rpx;
				border-radius: 50px;
				padding: 18rpx 0;
				font-size: 26rpx;
				color: #fff;
			}
			.btn1{
				background-color: #549CE3;
			}
			.btn2{
				background-color: #ffc53e;
			}
		}
	}
	.mainPage {
		background-color: #f3f3f3;
	}

	.icon-awrad {
		font-size: 50upx !important;
	}

	.conbox {
		width: 750upx;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;

		.main {
			padding-top: 280rpx;
		}
	}

	.container,
	image.cont {
		width: 750upx;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	image.cont {
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 0;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}


	.header-title>view {
		padding: 8upx 16upx;
		border: 1px solid #d89720;
		color: #d89720;
		font-size: 28upx;
		border-radius: 26upx;
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600upx;
		height: 600upx;
		background: url(https://cdn.zhidiaotianxia.com//def/8edf020241223171400278.png) no-repeat;
		background-size: cover;
		border-radius: 50%;
	}


	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		width: 600upx;
		height: 600upx;
		border-radius: inherit;
		/* background-clip: padding-box; */
		/* background-color: #ffcb3f; */
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 46upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.canvas-item-text text {
		font-size: 24rpx;
	}
	.canvas-item-text .a{
		color: #9f9f9f;
	}
	.canvas-item-text .b{
		color: #FB778B;
		font-weight: bold;
	}
	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300upx;
		top: 0;
		width: 3upx;
		height: 300upx;
		background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	/**
	* 抽奖按钮
	*/
	.canvas-btn {
		position: absolute;
		left: 260upx;
		top: 260upx;
		z-index: 400;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		color: #f4e9cc;
		background-color: #e44025;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12upx;
		top: -44upx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #e44025;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #b07a7b;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #b07a7b;
	}


	.typecheckbox view {
		border: 1px solid #FF3637;
		background: transparent;
		color: #FF3637;
		display: flex;
		height: 60upx;
		width: 140upx;
		border-radius: 50upx;
		align-items: center;
		justify-content: center;
		display: flex;
		margin-left: 20upx;
	}


	.guize {
		width: 580rpx;
		margin-left: 85rpx;

		position: relative;
		z-index: 3;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 20rpx;
			font-weight: bold;

		}
	}
	.myrewards .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding-top: 36upx;
		justify-content: center;
	}

	.head {
		position: absolute;
		width: 750rpx;
		top: 40rpx;
		left: 0;
		z-index: 100;

		.head-title {
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
			color: #fff;
		}

		.head-subtitle {
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}

		.head-tip-title {
			font-size: 24rpx;
			color: #fe944b;
			text-align: center;
		}
	}
</style>